<template>
  <div class="search">
    <template v-if="hasName">
      <span class="name">名称：</span>
      <el-input clearable v-model="input" placeholder="请输入" />
    </template>
    <template v-if="hasLabs">
      <span class="name">实验室：</span>
      <el-select clearable v-model="lab" placeholder="请选择实验室">
        <el-option
          v-for="item in allLabs"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </template>
    <template v-if="hasStatus">
      <span class="name">状态：</span>
      <el-select clearable v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>
    <el-button type="success" size="mini" icon="el-icon-search" @click="clickSearch">搜索</el-button>
    <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="clickReset">重置</el-button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    options: {
      type: Array,
      default: () => []
    },
    hasLabs: {
      type: Boolean,
      default: true
    },
    hasStatus: {
      type: Boolean,
      default: true
    },
    hasName: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lab: '',
      value: '',
      input: ''
    }
  },
  created() {
  },
  computed: {
    ...mapState('hjuser', ['allLabs'])
  },
  methods: {
    clickSearch() {
      this.$emit('search', this.input, this.lab, this.value)
      // this.input = this.lab = this.value = this.id = ''
    },
    clickReset() {
      this.input = this.lab = this.value = this.id = ''
      this.$emit('search', this.input, this.lab, this.value)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/views/website/style/hjUserSearch.scss';
</style>
